<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item>
          <el-select v-model="queryParams.workShopId" placeholder="请选择车间" size="mini" @change="getData()">
            <el-option
              v-for="item in workShops"
              :key="item.workshopId"
              :label="item.workshopName"
              :value="item.workshopId">
            </el-option>
          </el-select>
			<el-select v-model="queryParams.productType" placeholder="请选择类型" size="mini" @change="getData()">
			  <el-option
				v-for="item in types"
				:key="item.typeId"
				:label="item.typeName"
				:value="item.typeId">
			  </el-option>
			</el-select>
      </el-form-item>
      <el-form-item>
            <el-date-picker
							size="mini"
              v-model="timeRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              @change="getData()"
              >
            </el-date-picker>
      </el-form-item>
    </el-form>


    <div style="overflow:scroll;">
    <table border="1px" width="95%">
      <tr><td v-for="(t,index) in title" :key="index">{{t}}</td></tr>
      <tr v-for="(rowData,index) in tableData" :key="index">
        <td :span="1" v-for="(t,index) in title" :key="index">
          <i class="el-icon-check" style="color: green;font-size: 36px;" v-if="rowData[title[index]] == true"></i>
           <span v-else-if="rowData[title[index]] == false">&nbsp;</span>
          <span v-else>{{rowData[title[index]]}}</span>
        </td>
      </tr>
    </table>
    </div>


      <el-pagination
        layout="prev, pager, next"
        :total="totalCount"
        @current-change="handleCurrentChange">
      </el-pagination>

  </div>
</template>

<script>

    import { workShopWaterGet,visit } from '@/api/tables'
    import { getWorkshopList } from "@/api/workshop"
    import { CODE_OK } from '@/common/js/config'

  export default {
    name: 'workshop',
    data() {
      return {
        seDate: [],
        queryParams:{
		  productType:"T6",
          workShopId:13,
          pageIndex:1,
          pageSize:10,
          startTime:'',
          endTime:''
        },
        title:[],
        tableData:[],
        workShops:[],
        timeRange:[],
        totalCount:0,
		types:[
			{
				typeId:"S3",
				typeName:"注射用水"
			},{
				typeId:"S1",
				typeName:"饮用水"
			},{
				typeId:"T6",
				typeName:"纯蒸汽"
			},{
				typeId:"S2",
				typeName:"纯化水"
			}
		]
      }
    },
    mounted() {
	  visit("车间取水点查询").then().catch()
      this.getData()
      getWorkshopList({ page:1, limit:999 }).then(res => {
      	this.workShops = res.page.list
      }).catch()
    },
    methods:{
      getData(){
        if(this.timeRange != null && this.timeRange.length != 0){
          this.queryParams.startTime = this.timeRange[0]
          this.queryParams.endTime = this.timeRange[1]
        }else{
          this.queryParams.startTime = ''
          this.queryParams.endTime = ''
        }
        workShopWaterGet(this.queryParams).then(res => {
          if (res.code === CODE_OK) {
            this.title = res.title
            this.tableData = res.data
            this.totalCount = res.page.totalCount
          }else{
            this.tableData = []
            this.$message.error(res.msg)
          }
        }).catch()
      },
      handleCurrentChange(val){
        this.queryParams.pageIndex = val
        this.getData();
      }
    }
  }
</script>

<style>

/*  table td {padding: 15px;} */

</style>
